<template lang="html">
  <div>
    <div slot="label" class="data-auth-label fac">
      <span class="text">角色:</span>
      <el-button v-if="!isCheck" type="text" class="pl10" @click="addRole">添加角色</el-button>
    </div>

    <div>
      <el-tag
        v-for="(item, index) in checkedRoleList"
        :key="index"
        :closable="!isCheck"
        size="medium"
        @close="roleDel(index)"
        >{{ item.roleName }}</el-tag
      >
    </div>

    <!-- 选择角色弹窗 -->
    <select-role-dialog
      :dialogVisible.sync="selectRoleDialogVisible"
      :currentCheckedRoleList="checkedRoleList"
      @success="selectRoleSuccess"
    />
  </div>
</template>

<script>
import SelectRoleDialog from "./../select-role-dialog";

export default {
  components: { SelectRoleDialog },
  props: {
    // 是否为查看
    isCheck: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      // 选择角色弹窗开关
      selectRoleDialogVisible: false,
      // 已选择的角色列表
      checkedRoleList: [],
    };
  },

  methods: {
    /**
     * 添加角色
     */
    addRole() {
      this.selectRoleDialogVisible = true;
    },
    /**
     * 删除选择的角色
     */
    async roleDel(index) {
      await this.$myConfirm("删除本角色");
      this.checkedRoleList.splice(index, 1);
    },
    selectRoleSuccess({ val }) {
      this.checkedRoleList = val;
    },
    setCheckedRoleList(val) {
      this.checkedRoleList = val;
    },
    /**
     * 获取角色id列表
     * 父组件调用
     */
    getRoleIdList() {
      return this.checkedRoleList.map((item) => item.roleId);
    },
  },
};
</script>

<style lang="scss" scoped>
.data-auth-label {
  .text {
    color: #606266;
    &::before {
      content: "*";
      color: #f56c6c;
      margin-right: 4px;
    }
  }
}
</style>
